

.login-page {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

.bg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.bg-gradient {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
      /* 主渐变层 - 深邃的太空色调 */
      radial-gradient(ellipse at top, rgba(16, 25, 58, 0.9) 0%, rgba(8, 12, 25, 0.95) 70%),
      linear-gradient(135deg,
        rgba(30, 41, 82, 0.8) 0%,
        rgba(16, 25, 58, 0.9) 25%,
        rgba(8, 12, 25, 0.95) 50%,
        rgba(2, 6, 15, 0.98) 75%,
        rgba(0, 0, 0, 1) 100%);
    background-size: 150% 150%, 400% 400%;
    animation: gradientShift 20s ease infinite;
  
    /* 添加纹理效果 */
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image:
        radial-gradient(circle at 25% 25%, rgba(120, 160, 255, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(255, 120, 200, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 10%, rgba(0, 200, 255, 0.06) 0%, transparent 40%);
      animation: textureFloat 25s ease-in-out infinite;
    }
  
    /* 添加光效层 */
    &::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background:
        linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.02) 50%, transparent 60%),
        radial-gradient(ellipse at center, rgba(100, 150, 255, 0.03) 0%, transparent 70%);
      animation: lightSweep 30s ease infinite;
    }
}

@keyframes gradientShift {
  0% {
      background-position: 0% 50%, 0% 50%;
      transform: scale(1);
    }
  
    25% {
      background-position: 50% 25%, 25% 75%;
      transform: scale(1.02);
    }
  
    50% {
      background-position: 100% 50%, 100% 50%;
      transform: scale(1);
    }
  
    75% {
      background-position: 50% 75%, 75% 25%;
      transform: scale(1.02);
    }
  
    100% {
      background-position: 0% 50%, 0% 50%;
      transform: scale(1);
    }
  }
  
  @keyframes textureFloat {
  
    0%,
    100% {
      transform: translate(0, 0) rotate(0deg);
      opacity: 0.6;
    }
  
    33% {
      transform: translate(30rpx, -20rpx) rotate(120deg);
      opacity: 0.8;
    }
  
    66% {
      transform: translate(-20rpx, 30rpx) rotate(240deg);
      opacity: 0.4;
    }
  }
  
  @keyframes lightSweep {
    0% {
      transform: translateX(-100%) rotate(45deg);
      opacity: 0;
    }
  
    50% {
      opacity: 1;
    }
  
    100% {
      transform: translateX(100%) rotate(45deg);
      opacity: 0;
    }
}

.floating-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  
  .shape {
    position: absolute;
    border-radius: 50%;
    animation: float 25s ease-in-out infinite;
      filter: blur(1rpx);
    
    &.shape-1 {
      width: 240rpx;
        height: 240rpx;
        top: 8%;
        left: 8%;
        background: radial-gradient(circle, rgba(100, 150, 255, 0.12) 0%, rgba(120, 160, 255, 0.06) 40%, transparent 70%);
      animation-delay: 0s;
    }
    
    &.shape-2 {
      width: 180rpx;
        height: 180rpx;
        top: 25%;
        right: 12%;
        background: radial-gradient(circle, rgba(255, 120, 200, 0.1) 0%, rgba(255, 140, 220, 0.05) 40%, transparent 70%);
        animation-delay: -8s;
    }
    
    &.shape-3 {
      width: 320rpx;
        height: 320rpx;
        bottom: 35%;
        left: -60rpx;
        background: radial-gradient(circle, rgba(0, 200, 255, 0.08) 0%, rgba(50, 220, 255, 0.04) 40%, transparent 70%);
        animation-delay: -15s;
    }
    
    &.shape-4 {
      width: 120rpx;
        height: 120rpx;
        bottom: 15%;
        right: 18%;
        background: radial-gradient(circle, rgba(200, 100, 255, 0.1) 0%, rgba(220, 120, 255, 0.05) 40%, transparent 70%);
        animation-delay: -22s;
    }
    
    &.shape-5 {
      width: 280rpx;
        height: 280rpx;
        top: 55%;
        right: -90rpx;
        background: radial-gradient(circle, rgba(255, 200, 100, 0.08) 0%, rgba(255, 220, 120, 0.04) 40%, transparent 70%);
        animation-delay: -12s;
      }
      
      /* 新增更多装饰性元素 */
      &.shape-6 {
        width: 160rpx;
        height: 160rpx;
        top: 45%;
        left: 5%;
        background: radial-gradient(circle, rgba(150, 255, 150, 0.06) 0%, rgba(170, 255, 170, 0.03) 40%, transparent 70%);
        animation-delay: -18s;
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0rpx) translateX(0rpx) rotate(0deg) scale(1);
      opacity: 0.6;
  }
                                25% {
                                  transform: translateY(-40rpx) translateX(20rpx) rotate(90deg) scale(1.1);
                                  opacity: 0.8;
  }
                                50% {
                                  transform: translateY(-10rpx) translateX(-30rpx) rotate(180deg) scale(0.9);
                                  opacity: 0.4;
                                }
                
                                75% {
                                  transform: translateY(30rpx) translateX(10rpx) rotate(270deg) scale(1.05);
                                  opacity: 0.7;
  }
}

.login-container {
  position: relative;
  z-index: 2;
  padding: 80rpx 60rpx 0;
  min-height: calc(100vh - 120rpx);
  display: flex;
  flex-direction: column;
}

.logo-section {
  text-align: center;
  margin-bottom: 60rpx;
  
  .logo-wrapper {
    position: relative;
    display: inline-block;
    margin-bottom: 32rpx;
    
    .logo-bg {
      width: 140rpx;
      height: 140rpx;
      background:
          linear-gradient(145deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.08) 100%),
          radial-gradient(circle at 30% 30%, rgba(120, 160, 255, 0.15) 0%, transparent 70%);
        border: 2rpx solid rgba(255, 255, 255, 0.25);
      border-radius: 35rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      backdrop-filter: blur(25rpx);
        box-shadow:
          0 8rpx 32rpx rgba(0, 0, 0, 0.3),
          inset 0 1rpx 0 rgba(255, 255, 255, 0.3),
          inset 0 -1rpx 0 rgba(0, 0, 0, 0.1);
      position: relative;
      overflow: hidden;
      
      /* 增强的光泽效果 */
      &::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background:
            linear-gradient(45deg,
              transparent 30%,
              rgba(255, 255, 255, 0.2) 50%,
              transparent 70%);
          animation: shine 4s ease-in-out infinite;
        }
        
        /* 添加内发光效果 */
        &::after {
          content: '';
          position: absolute;
          top: 4rpx;
          left: 4rpx;
          right: 4rpx;
          bottom: 4rpx;
          border-radius: 31rpx;
          background: linear-gradient(145deg,
              rgba(255, 255, 255, 0.1) 0%,
              rgba(255, 255, 255, 0.02) 100%);
          pointer-events: none;
      }
    }
  }
  
  .app-name {
    display: block;
    font-size: 56rpx;
    font-weight: bold;
    color: #fff;
    margin-bottom: 16rpx;
    text-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.3);
  }
  
  .app-desc {
    display: block;
    font-size: 30rpx;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 8rpx;
  }
  
  .app-version {
    display: block;
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.7);
  }
}

@keyframes shine {
  0% {
      transform: translateX(-120%) translateY(-120%) rotate(45deg);
      opacity: 0;
    }
  
    50% {
      opacity: 1;
    }
  
    100% {
      transform: translateX(120%) translateY(120%) rotate(45deg);
      opacity: 0;
    }
  }
  
  @keyframes cardGlow {
  
    0%,
    100% {
      transform: translateX(-50%) translateY(-50%) scale(0.8);
      opacity: 0.3;
    }
  
    50% {
      transform: translateX(-50%) translateY(-50%) scale(1.2);
      opacity: 0.1;
    }
}

.glass-card {
  background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.06) 100%),
      radial-gradient(circle at 20% 20%, rgba(120, 160, 255, 0.08) 0%, transparent 50%);
    border: 1rpx solid rgba(255, 255, 255, 0.25);
  border-radius: 32rpx;
  padding: 60rpx 50rpx;
  backdrop-filter: blur(25rpx);
    box-shadow:
      0 12rpx 40rpx rgba(0, 0, 0, 0.4),
      0 4rpx 12rpx rgba(0, 0, 0, 0.2),
      inset 0 1rpx 0 rgba(255, 255, 255, 0.3),
      inset 0 -1rpx 0 rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  
  /* 增强的顶部高光 */
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2rpx;
    background: linear-gradient(90deg, 
      transparent, 
      rgba(255, 255, 255, 0.8) 20%,
        rgba(120, 160, 255, 0.6) 50%,
        rgba(255, 255, 255, 0.8) 80%,
      transparent);
  }
  
    /* 添加动态光效 */
    &::after {
      content: '';
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: radial-gradient(circle,
          rgba(255, 255, 255, 0.03) 0%,
          transparent 70%);
      animation: cardGlow 8s ease-in-out infinite;
      pointer-events: none;
    }
  .card-header {
    text-align: center;
    margin-bottom: 50rpx;
    
    .card-title {
      display: block;
      font-size: 40rpx;
      font-weight: bold;
      color: #fff;
      margin-bottom: 16rpx;
    }
    
    .card-subtitle {
      display: block;
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.8);
    }
  }
  
  .input-group {
    margin-bottom: 30rpx;
    
    .input-wrapper {
      background: rgba(255, 255, 255, 0.1);
      border: 1rpx solid rgba(255, 255, 255, 0.2);
      border-radius: 50rpx;
      padding: 24rpx 32rpx;
      display: flex;
      align-items: center;
      gap: 24rpx;
      backdrop-filter: blur(10rpx);
      transition: all 0.3s ease;
      
      &:focus-within {
        background: rgba(255, 255, 255, 0.15);
        border-color: rgba(0, 212, 255, 0.5);
        box-shadow: 0 0 0 4rpx rgba(0, 212, 255, 0.1);
      }
    }
  }
  
  .form-options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 30rpx 0;
    
    .option-text {
      font-size: 28rpx;
      color: rgba(255, 255, 255, 0.9);
      margin-left: 16rpx;
    }
    
    .forgot-link {
      font-size: 28rpx;
      color: #00D4FF;
      text-decoration: none;
    }
  }
  
  .login-btn-wrapper {
    margin: 40rpx 0 30rpx;
    
    .btn-text {
      font-size: 32rpx;
      font-weight: bold;
      color: #ffffff;
    }
  }
  
  .divider {
    display: flex;
    align-items: center;
    margin: 40rpx 0;
    
    .divider-line {
      flex: 1;
      height: 1rpx;
      background: rgba(255, 255, 255, 0.2);
    }
    
    .divider-text {
      font-size: 24rpx;
      color: rgba(255, 255, 255, 0.6);
      margin: 0 30rpx;
    }
  }
  
  .social-login {
    display: flex;
    gap: 30rpx;
    
    .social-btn {
      flex: 1;
      background: rgba(255, 255, 255, 0.1);
      border: 1rpx solid rgba(255, 255, 255, 0.2);
      border-radius: 50rpx;
      padding: 24rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 16rpx;
      backdrop-filter: blur(10rpx);
      transition: all 0.3s ease;
      
      &:active {
        background: rgba(255, 255, 255, 0.15);
        transform: scale(0.98);
      }
      
      text {
        font-size: 26rpx;
        color: rgba(255, 255, 255, 0.9);
      }
    }
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 30rpx 40rpx;
  z-index: 2;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.2) 100%);
    backdrop-filter: blur(15rpx);
    border-top: 1rpx solid rgba(255, 255, 255, 0.1);
  
  .copyright {
    display: block;
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8rpx;
    text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
  }
  
  .version {
    display: block;
    font-size: 20rpx;
    color: rgba(255, 255, 255, 0.6);
      text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
  }
}

// uView组件样式兼容
:deep(.u-input__content__field-wrapper__field) {
  color: #ffffff !important;
}

:deep(.u-checkbox__icon-wrap) {
  border-color: rgba(255, 255, 255, 0.3) !important;
}
// 优化输入框焦点效果
:deep(.u-input--focused) {
  .u-input__content__field-wrapper__field {
    color: #ffffff !important;
  }
}

// 增强按钮样式
:deep(.u-button) {
  background: linear-gradient(135deg,
      rgba(0, 212, 255, 0.8) 0%,
      rgba(0, 150, 255, 0.9) 100%) !important;
  border: none !important;
  box-shadow:
    0 8rpx 24rpx rgba(0, 212, 255, 0.3),
    inset 0 1rpx 0 rgba(255, 255, 255, 0.2) !important;

  &:active {
    transform: scale(0.98) !important;
    box-shadow:
      0 4rpx 12rpx rgba(0, 212, 255, 0.4),
      inset 0 1rpx 0 rgba(255, 255, 255, 0.2) !important;
  }
}